import { useDispatch, useSelector } from "react-redux";
import { useAllCategory } from "@/apis/category";
import { Link } from "react-router-dom";
import "./appheader.scss";
import classNames from "classnames";
import { setHide, setShow } from "@/store/modules/category";
function AppHeaderNavar() {
  const category = useSelector((state: any) => state.category.list);
  const dispatch = useDispatch();
  useAllCategory();
  const show = function (id: number) {
    dispatch(setShow(id));
  };
  const hide = function (id: number) {
    dispatch(setHide(id));
  };
  return (
    <ul className="app-header-nav">
      <li className="home">
        <Link to="/">首页</Link>
      </li>
      {category[0]?.id &&
        category[0]?.children &&
        category.map((item: any) => (
          <li
            key={item.id}
            onMouseMove={() => show(item.id)}
            onMouseLeave={() => hide(item.id)}
          >
            <Link onClick={() => hide(item.id)} to={`/category/${item.id}`}>
              {item.name}
            </Link>
            <div className={classNames("layer", { open: item.open })}>
              <ul>
                {item.children.map((sub: any) => (
                  <li key={sub.id}>
                    <Link
                      onClick={() => hide(item.id)}
                      to={`/category/sub/${sub.id}`}
                    >
                      <img src={sub.picture} alt="" />
                      <p>{sub.name}</p>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </li>
        ))}
    </ul>
  );
}

export default AppHeaderNavar;
